<template>
	<div>
		<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>商品管理</a></el-breadcrumb-item>
		  <el-breadcrumb-item>分类参数</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区 -->
		<el-card>
			<!-- 提示条区域 -->
			<el-alert title="注意: 只允许为第三级分类设置相关参数" type="warning":closable="false"> </el-alert>
			<!-- 选择商品区域 -->
			<el-row style="margin-top: 15px;">
				<el-col>
					<span>选择商品分类:</span>
					<el-cascader
					  style="width: 40%;"
					  :clearable="true"
					  :filterable="true"
					  expand-trigger="hover"
					  v-model="selector"
					  :options="paramsList"
					  @change="handleChange"
					 :props="paramsProps"
						></el-cascader>
				</el-col>
			</el-row>
			<!-- tab 页签区域 -->
			 <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin-top:20px;">
			    <el-tab-pane label="动态参数" name="many">
					<el-button :disabled="judge" size="mini" type="primary" @click="editFormVisible = true">添加参数</el-button>
					<!-- 动态参数表格 -->
				<el-table :data="manyTabData" border style="margin-top: 15px;">
					<el-table-column  type="expand" >
						<!-- 下拉框 tag 视图 -->
						<template slot-scope="scope">
							<!-- 循环渲染 tag  -->
							<el-tag
							
							  :key="item.cat_id"
							  v-for="(item,index) in scope.row.attr_vals"
							  closable
							  :disable-transitions="false"
							  @close="handleClose(scope.row,index)">
							  {{item}}
							</el-tag>
						<el-input
						  class="input-new-tag"
						  v-if="scope.row.inputVisible"
						  v-model="scope.row.inputValue"
						  ref="saveTagInput"
						  size="small"
						  @keyup.enter.native="handleInputConfirm(scope.row)"
						>
						</el-input>
						<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
						</template>
					</el-table-column>
					<el-table-column label="#" type="index" ></el-table-column>
					<el-table-column  label="参数名称" prop="attr_name"></el-table-column>
					<el-table-column label="操作" >
						<template slot-scope="scope">
								<el-button size="mini" type="primary" icon="el-icon-edit" @click="modifyDialog(scope.row)">编辑</el-button>
								<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeDialog(scope.row)">删除</el-button>
						</template>
					
					</el-table-column>
				</el-table>
				</el-tab-pane>
			    <el-tab-pane label="静态属性" name="only">
					<el-button :disabled="judge" size="mini"  type="primary" @click="editFormVisible = true">添加属性</el-button>
					<!-- 静态属性表格 -->
					<el-table :data="onlyTabData" border style="margin-top: 15px;">
						<el-table-column  type="expand" >
							<!-- 下拉框 tag 视图 -->
							<template slot-scope="scope">
								<!-- 循环渲染 tag  -->
								<el-tag
								  :key="item.cat_id"
								  v-for="(item,index) in scope.row.attr_vals"
								  closable
								  :disable-transitions="false"
								  @close="handleClose(scope.row,index)">
								  {{item}}
								</el-tag>
							<el-input
							  class="input-new-tag"
							  v-if="scope.row.inputVisible"
							  v-model="scope.row.inputValue"
							  ref="saveTagInput"
							  size="small"
							  @keyup.enter.native="handleInputConfirm(scope.row)"
							>
							</el-input>
							<el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
							</template>
						</el-table-column>
						<el-table-column label="#" type="index" ></el-table-column>
						<el-table-column  label="参数名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作" >
							<template slot-scope="scope">
									<el-button size="mini" type="primary" icon="el-icon-edit" @click="modifyDialog(scope.row)">编辑</el-button>
									<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeDialog(scope.row)">删除</el-button>
							</template>
						
						</el-table-column>
					</el-table>
				</el-tab-pane>
			  </el-tabs>
		</el-card>
		<!-- 添加参数对话框 -->
		<el-dialog :title="'添加'+titleText" :visible.sync="editFormVisible" @close="editDialog">
		  <el-form ref="editFormRef" :rules="addFormRules" :model="paramcation" label-width="80px" class="demo-ruleForm">
		    <el-form-item :label="titleText" prop="attr_name">
		  	<el-input  v-model="paramcation.attr_name" :placeholder="'请输入'+titleText"></el-input>
		    </el-form-item>
		    </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="editFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addParmas">确 定</el-button>
		  </div>
		</el-dialog>
		<!-- 修改参数对话框 -->
		<el-dialog :title="'修改'+titleText" :visible.sync="modifyFormVisible" @close="editDialog">
		  <el-form ref="editFormRef" :rules="addFormRules" :model="paramcation" label-width="80px" class="demo-ruleForm">
		    <el-form-item :label="titleText" prop="attr_name">
		  	<el-input  v-model="paramcation.attr_name" :placeholder="'请输入'+titleText"></el-input>
		    </el-form-item>
		    </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="modifyFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="modifyParmas">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				manyTabData:[],			//动态参数数据
				onlyTabData:[],			//静态属性数据
				activeName:'many',		//绑定值，选中选项卡的 name 为展示的
				titleText:'动态参数',			//添加参数对话框的标题名称
				editFormVisible:false,		//添加参数对话框默认显示隐藏
				modifyFormVisible:false,	//修改参数对话框默认显示隐藏
				inputVisible:false,			//控制 tag 组件的文本框和按钮切换
				inputValue:'',				//tag 组件文本框的输入内容	
				judge:true,		//判断参数和属性按钮是否禁用
				selector:[],		//选择器数据结果
				paramsList:[],			//选择商品分类选择器数据列表
				paramcation:{			//添加参数对话框数据
					attr_name:''
				},
				attrId:0,				//当前分类属性 id
				paramsProps:{			//指定级联选择器的配置对象
					value:'cat_id',
					label:'cat_name',
					children:'children'
				},
				addFormRules: {		//添加用户表单验证规则
					  attr_name: [
						{ required: true, message: '请输入内容', trigger: 'blur' },
						{ min: 1, max: 10, message: '长度在 1 ~ 10 个字符', trigger: 'blur' }
					  ],
				}
			}
		},
		methods:{
			handleClose(row,index){			//点击 tag 标签 x 触发
				console.log(index)
				console.log(row)
				row.attr_vals.splice(index,1)
					var data = {
						attr_name:row.attr_name,
						attr_sel:row.attr_sel,
						attr_vals:row.attr_vals.join(',')
						
					}
					this.$axios.put('categories/'+this.selector[2]+'/attributes/'+row.attr_id,data).then(data => {
						console.log(data.data)
						if(data.data.meta.status == 200){
							this.$message({message: '删除成功', type: 'success'});
						}else{
							this.$message({message: data.data.meta.msg, type: 'error'});
						}
						row.inputValue = ''
						row.inputVisible = false
					})
					
			},
			handleInputConfirm(row){		//tag 组件的文本框 失去焦点或者是按下 enter 触发
				console.log(21616)
				row.attr_vals.push(row.inputValue)
				if(row.inputValue != ''){
					var data = {
						attr_name:row.attr_name,
						attr_sel:row.attr_sel,
						attr_vals:row.attr_vals.join(',')
						
					}
					this.$axios.put('categories/'+this.selector[2]+'/attributes/'+row.attr_id,data).then(data => {
						console.log(data.data)
						if(data.data.meta.status == 200){
							this.$message({message: data.data.meta.msg, type: 'success'});
						}else{
							this.$message({message: data.data.meta.msg, type: 'error'});
						}
						row.inputValue = ''
						row.inputVisible = false
					})
					}else{
						this.$message({message: '请正确输入', type: 'error'});
					}
				
			},	
			
			showInput(row){		//点击按钮展示文本框
				row.inputVisible = true
				 this.$nextTick(_ => {		//让文本框自动获取焦点
				 // $nextTick 当页面重新渲染之后,才会指定回调函数中的代码
				          this.$refs.saveTagInput.$refs.input.focus();
				        });
			},
			editDialog(){		//监听修改用户对话框的关闭时间事件
				this.$refs.editFormRef.resetFields()		//重置添加用户对话框数据
			},
			handleChange(value){			//监听选择项发生变化
				console.log(value)
				console.log(this.selector)
				if(this.selector.length !== 3){
					this.selector = []
					this.manyTabData = []
					this.onlyTabData = []
					this.$message({message: '请选择三级分类商品', type: 'error'});
				}else{
						this.getParamsData()
					this.judge = false
				}
			},
			getParamsData(){		//获取分类参数列表
				this.$axios.get('categories/'+this.selector[2]+'/attributes',{params:{sel:this.activeName}}).then(data => {
					console.log(data.data)
					//将字符串转为数组 并且循环    再进判断如果字符串为空就返回一个空数组
					data.data.data.forEach(item => {item.attr_vals = item.attr_vals ? item.attr_vals.split(','):[],
					//为每个数组都给上这值 防止不同数组的同步联动
					item.inputVisible = false		//控制输入框的显示与隐藏
					item.inputValue = ''			//文本框输入的值
					})
					
					console.log(data.data.data)
					if(this.activeName == 'many'){
						this.manyTabData = data.data.data
					}else if(this.activeName == 'only'){
						this.onlyTabData = data.data.data
					}
				})
			},
			handleClick(){		//切换 tab 页签时触发
				 console.log(this.activeName) 
				 if(this.activeName == 'many'){
					 this.titleText = '动态参数'
				 }else{
					 this.titleText = '静态属性'
				 }
				 this.getParamsData()
			},
			getParamsFrom(){		//选择商品分类选择器所需数据
				this.$axios.get('categories').then(data => {
					console.log(data.data.data)
					this.paramsList = data.data.data
				})
			},
			addParmas(){		//添加参数对话框确定事件
			if(this.paramcation.attr_name != ''){
				var data = {
					attr_name:this.paramcation.attr_name,
					attr_sel:this.activeName
				}
				this.$axios.post('categories/'+this.selector[2]+'/attributes',data).then(data => {
					console.log(data.data)
					if(data.data.meta.status == 201){
						this.$message({message: data.data.meta.msg, type: 'success'});
					}else{
						this.$message({message: data.data.meta.msg, type: 'error'});
					}
					this.getParamsData()
					this.editFormVisible = false
				})
				}else{
					this.$message({message: '请正确输入', type: 'error'});
				}
			},
			modifyDialog(row){				//点击编辑按钮触发
				console.log(row)
				this.attrId = row.attr_id
				this.paramcation.attr_name = row.attr_name
				this.modifyFormVisible = true
			},
			modifyParmas(){		//编辑参数对话框确定事件
			if(this.paramcation.attr_name != ''){
				var data = {
					attr_sel:this.activeName,
					attr_name:this.paramcation.attr_name
				}
				this.$axios.put('categories/'+this.selector[2]+'/attributes/'+this.attrId,data).then(data => {
					console.log(data.data)
					if(data.data.meta.status == 200){
						this.$message({message: data.data.meta.msg, type: 'success'});
					}else{
						this.$message({message: data.data.meta.msg, type: 'error'});
					}
					this.getParamsData()
					this.modifyFormVisible = false
				})
				}else{
					this.$message({message: '请正确输入', type: 'error'});
				}
			},
			removeDialog(row){		//删除参数事件
				console.log(row)
				this.$confirm('此操作将永久删除该用户, 是否继续?', '提示',{
					confirmButtonText: '确定', cancelButtonText: '取消',type: 'warning'
				        }).then(() => {
							console.log(row.attr_id)
							this.$axios.delete('categories/'+this.selector[2]+'/attributes/'+row.attr_id).then(data => {
								console.log(data.data)
								if(data.data.meta.status == 200){
									this.$message({message: data.data.meta.msg, type: 'success'});
								}else{
									this.$message({message: data.data.meta.msg, type: 'error'});
								}
								this.getParamsData()
							})
				        }).catch(() => {
				          this.$message({type: 'info',message: '已取消删除'
				       });          
				   });
			}
		},
		created(){
			this.getParamsFrom()
		}
	}
</script>
<style lnag="scss" scoped>
	.el-card{
		margin-top: 15px;
	}
	.input-new-tag{
		width: 120px;
	}
	.el-tag{
		margin-left: 8px;
	}
</style>
